<template>
  <div class="role">
    <DFPageList ref="dfPageListRef" :pageOptions="pageOptions">
      <template #roleMenuTree>
        <RoleMenuTree
          ref="roleMenuTreeRef"
          :allPermissionsList="allPermissions"
          :treeDataList="treeData"
        />
      </template>
    </DFPageList>
  </div>
</template>

<script lang="ts" setup name="Role">
  import lang from './lang';
  import { listRole, addRole, updateRole, delRole,infoRole } from '@/api/system/role';
  import { useMixins } from '@/hooks/useMixins';
  import RoleMenuTree from './components/RoleMenuTree.vue';

  const { loadLangFn } = useMixins();

  const roleMenuTreeRef: any = ref(null);

  const dfPageListRef: any = ref(null);

  loadLangFn(lang);

  const treeData = ref([]);

  const allPermissions = ref([]);

  const beforeOpenDialogFn = async(data: any = {},type='add') => {
    let { permissionCodeList = [],id=null } = data;

    if (type === 'edit') {
      const res = await infoRole(id);

      permissionCodeList = res?.data || []
    }

    setTimeout(() => {
      nextTick(() => {
        roleMenuTreeRef.value && roleMenuTreeRef.value.setPermissionCodeListFn(permissionCodeList);
      });
    }, 0);

    return true;
  };

  const setDialogSubmitDataFn = (data = {}) => {
    if (roleMenuTreeRef.value) {
      data['permissionCodeList'] = toRaw(roleMenuTreeRef.value.getPermissionCodeListFn()) || [];

      // console.log(data)

      return data;
    }

    return data;
  };

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          label: 'roleName',
          prop:'name',
          component: 'NInput',
        },
      ],
    },
    table: {
      columns: [
        {
          width: 120,
          label: 'roleName',
          prop:'name',
        },
        {
          width: 120,
          label: 'remark',
          common: true,
        },
      ],
      action: {
        columns: [
          {
            label: 'edit',
          },
          {
            label: 'delete',
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
        },
      ],
      requestFn: listRole,
      delRequestFn: delRole,
    },
    modalFormDialog: {
      formSchemas: [
        {
          label: 'roleName',
          prop:'name',
          editDialogDisabled: true,
          required: true,
        },
        {
          label: 'remark',
          common: true,
          type: 'textarea',
        },
        {
          label: 'permission',
          prop:'permissionCodeList',
          slot: 'roleMenuTree',
          class: 'role-dialog-menu-tree',
        },
      ],
      beforeOpenDialogFn,
      addDataFn: addRole,
      updateDataFn: updateRole,
      setDialogSubmitDataFn,
    },
  };

  // nextTick(() => {
  //   dfPageListRef.value && dfPageListRef.value.openModalFn();
  // });
</script>

<style lang="less">
  .role-dialog-menu-tree {
    display: block;
    .n-form-item-blank {
      display: block;
    }

    .menu-tree-view {
      display: block;
      width: 100%;
      height: 300px;
      overflow: auto;
      border: 1px solid #e5e6e7;
      border-radius: 4px;
      position: relative;
      .after {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
      }

      .v-vl-items,
      .v-vl-visible-items {
        background-color: #fff;
        min-height: 298px;
      }
    }
  }
</style>
